<template>
  <div class="upload">
    <div class="header">
      <div class="left">
        <img src="../assets/logo.png" alt="爱闪信" class="logo">
        <p class="text">必发彩票包管理后台</p>
      </div>
      <div class="right">
        <p class="user">用户：<span class="iphone">{{userName}}</span></p>
        <p class="login"><el-button type="danger" size="mini" icon="el-icon-error" circle @click="loginOut"></el-button></p>
      </div>
    </div>
    <el-upload
      class="upload-demo"
      ref="upload"
      action="http://116.204.184.91:8080/uploadAPPFile.ashx"
      :data="data"
      list-type="picture"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :on-error="handleError"
      :on-success="handleSuccess"
      :file-list="fileList"
      :auto-upload="false">

      <el-button slot="trigger"  size="small" type="primary">选取上传文件</el-button>
    </el-upload>
    <el-button style="margin-top: 30px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
  </div>
</template>
<script>
import {getCookie,setCookie} from './until/index'
export default {
  data () {
    return {
      activeIndex: '1',
      userName:'',
      fileList: [],
      data:{userID: getCookie('userid'),token :getCookie('token')}
    }
  },
  created () {

    if(getCookie('userid')){
      this.userName = getCookie('userid')

    }else{
        this.$message.error('请退出后重新登录');

    }
  },
  methods: {
    submitUpload() {
      this.$refs.upload.submit();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handleError(err, file, fileList){
      this.$message.error('上传失败，请重新上传');
    },
    handleSuccess(response){

      this.$message({
          message: '恭喜你，上传'+response.msg,
          type: 'success'
        });
    },
    handlePreview(file) {
      console.log(file);
    },
    loginOut(){
      this.$confirm('此操作将退出登录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

          this.$message({
            type: 'success',
            message: '退出成功',
            onClose:()=>{
              setCookie('token','',-1)
              setCookie('userid','',-1)
              window.location.href='/'
            }
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消退出'
          });          
        });
    }
  }
}
</script>
<style scoped>
.upload{
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0
}
.header{
  width: 100%;
  height: 100%;
  display: table;
  background-color: #3a4759;
  color: #fff;
  margin-bottom: 30px;
}
.logo{
  float: left;
  width: 60px;
  height: 60px;
  display: block;
  margin: 10px 0 0 20px
}
.text{
  width: 200px;
  color: #fff;
  font-size: 14px;
  line-height: 55px;
  overflow: hidden;
}
.left{
  float: left;
}
.right{
  float: right;
  margin-right: 20px;
}
.right p{
  display: inline;
  line-height: 68px;
  font-size: 14px;
}
.right p.user{
  margin-right: 30px;
}
.right p.login{
  cursor: pointer;
}
</style>
  